<template>
  <div>
    <el-form
      ref="ResiterForm"
      :model="ResiterForm"
      label-width="80px"
      :rules="registerFormRules"
      status-icon
    >
      <el-form-item label="邀请码" prop="invitecode" v-show="level=='1'">
        <el-input
          v-model="ResiterForm.invitecode"
          prefix-icon="iconfont icon-users"
          autocomplete="off"
        ></el-input>
      </el-form-item>

      <el-form-item label="昵称" prop="username">
        <el-input
          v-model="ResiterForm.username"
          prefix-icon="iconfont icon-user"
          autocomplete="off"
          autofocus
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          v-model="ResiterForm.password"
          prefix-icon="iconfont icon-3702mima"
          type="password"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPwd">
        <el-input
          type="password"
          v-model="ResiterForm.checkPwd"
          prefix-icon="iconfont icon-3702mima"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="权限等级" v-show="level=='2'">
        <el-select v-model="ResiterForm.level" placeholder="请选择" style="width:100%;">
          <el-option label="0" value="0"></el-option>
          <el-option label="1" value="1"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <!--按钮-->
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="register()">{{btnMsg=level=='2'?'添加':'注册'}}</el-button>
      <el-button @click="reset()">重置</el-button>
    </span>
  </div>
</template>
<script>
export default {
  props: ['level'],
  data() {
    // 表单验证
    // 第一个密码验证
    var password = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ResiterForm.password !== '') {
          this.$refs.ResiterForm.validateField('checkPwd')
        }
        callback()
      }
    }
    // 第二个密码input的校验
    var checkPwd = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ResiterForm.password) {
        callback(new Error('两次输入不一致'))
      } else {
        callback()
      }
    }
    // 昵称的校验请求
    var checkName = async (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入昵称'))
      } else if (value.length > 15) {
        callback(new Error('1-15个字符'))
      } else {
        // 检验昵称是否存在
        const res = await this.$http.post('/preRegister', {
          userName: value
        })
        if (res.meta.code) {
          callback(new Error('昵称已存在'))
        }
        callback()
      }
    }
    // 邀请码的校验请求
    var inviteCode = async (rule, value, callback) => {
      if (this.level === 1) {
        if (value === '') {
          callback(new Error('请输入邀请码'))
        } else if (value.length !== 6) {
          callback(new Error('6个字符'))
        } else {
          // 检验昵称是否存在
          const res = await this.$http.post('/preInvite', {
            invitecode: value
          })
          if (!res.meta.code) {
            callback(new Error('验证码不存在'))
          }
          callback()
        }
      } else {
        callback()
      }
    }
    return {
      // 数据绑定
      ResiterForm: {
        username: '',
        password: '',
        checkPwd: '',
        invitecode: '',
        level: ''
      },
      registerFormRules: {
        username: [{ validator: checkName, trigger: 'blur' }],
        password: [{ validator: password, trigger: 'blur' }],
        checkPwd: [{ validator: checkPwd, trigger: 'blur' }],
        invitecode: [{ validator: inviteCode, trigger: 'blur' }]
      },
      btnMsg: ''
    }
  },
  created() {
    console.log(this.level)
  },
  methods: {
    // 注册
    register() {
      // 预验证valid返回boolean
      // console.log(this.ResiterForm)
      this.$refs.ResiterForm.validate(async valid => {
        // console.log(valid)
        if (!valid) return
        if (this.level !== '2') {
          this.ResiterForm.level = this.level
        }
        this.ResiterForm.level = parseInt(this.ResiterForm.level)
        const res = await this.$http.post('/register', this.ResiterForm)
        // console.log(res)
        if (res.meta.status !== 200) {
          return this.$Message.error('服务器请求失败')
        }
        if (this.level === '2') {
          this.$Message.success('添加用户成功')
          this.$emit('addUserOk', 'ok')
        } else {
          this.$Message.success('注册成功')
          this.$emit('registerOk', this.ResiterForm.username)
        }
        this.$refs.ResiterForm.resetFields()
      })
    },
    // 重置
    reset() {
      this.$refs.ResiterForm.resetFields()
    }
  }
}
</script>
<style lang="less" scoped>
.dialog-footer {
  display: flex;
  justify-items: center;
  .el-button {
    margin: 25px auto -10px;
  }
}
.el-form {
  .el-form-item {
    margin: 25px 25px 0 0;
  }
  .pwdAbout {
    .forgetPwd {
      position: absolute;
      top: 0;
      right: 0;
      text-decoration: none;
      color: red;
    }
  }
}
</style>
